<template>
    <view class="lb-tabbar">
        <view class="tab-bar-main">
            <view
                :class="['lb-tabbar-content', fixed ? 'lb-tabbar--fixed' : '']"
                :style="{
                    paddingBottom: `${safeAreaHeight}px`,
                }">
                <view
                    v-if="border"
                    class="lb-tabbar-border"
                    :style="{
                        backgroundColor: borderColor,
                        top: raisedeHeight + 'px',
                    }">
                </view>
                <slot></slot>
            </view>
            <view
                v-if="placeholder"
                class="lb-tabbar-placeholder"
                :style="{
                    height: `${tabbarHeight}px`,
                }">
            </view>
        </view>

        <view
            class="bg"
            :style="{
                height: `${tabbarHeight - raisedeHeight + safeAreaHeight + 4}px`,
            }"></view>
    </view>
</template>

<script>
const SAFE_AREA_INSET_BOTTOM = 10
import { getPx } from "./utils"
export default {
    props: {
        value: [String, Number],
        height: {
            type: String,
            default: "50px",
        },
        iconSize: {
            type: String,
            default: "22px",
        },
        textSize: {
            type: String,
            default: "12px",
        },
        textTop: {
            type: String,
            default: "5px",
        },
        dotColor: {
            type: String,
            default: "#F56C6C",
        },
        fixed: {
            type: Boolean,
            default: true,
        },
        placeholder: {
            type: Boolean,
            default: true,
        },
        animate: String,
        closeAnimateOnRaisede: {
            type: Boolean,
            default: true,
        },
        border: {
            type: Boolean,
            default: false,
        },
        borderColor: {
            type: String,
            default: "#DCDFE6",
        },
        bgColor: {
            type: String,
            default: "#FFF",
        },
        inactiveColor: {
            type: String,
            default: "#252528",
        },
        activeColor: {
            type: String,
            default: "#F1270C",
        },
        inactiveTextColor: String,
        activeTextColor: String,
        safeAreaInsetBottom: {
            type: Boolean,
            default: true,
        },
        hideTabbar: {
            type: Boolean,
            default: true,
        },
        raisedeScale: {
            type: Number,
            default: 2,
        },
    },
    data() {
        return {
            active: this.value,
            activeItem: {},
            tabbarItems: [],
            hasRaisede: false,
            isIphoneX: false,
        }
    },
    computed: {
        tabbarItemsLength() {
            return this.tabbarItems.length
        },
        safeAreaHeight() {
            return this.isIphoneX && this.safeAreaInsetBottom ? SAFE_AREA_INSET_BOTTOM : 0 // 苹果X等机型安全区高度
        },
        iconHeight() {
            return getPx(this.iconSize)
        },
        raisedeHeight() {
            return this.hasRaisede ? (this.iconHeight * this.raisedeScale) / 2 : 0 // 凸起高度
        },
        tabbarHeight() {
            const height = getPx(this.height) // 默认高度
            const raisedeHeight = this.hasRaisede ? (this.iconHeight * this.raisedeScale) / 2 : 0 // 凸起高度
            const tabbarHeight = height + this.safeAreaHeight + raisedeHeight // 整体高度
            return tabbarHeight
        },
    },
    provide() {
        return {
            tabbar: this,
        }
    },
    created() {
        if (this.hideTabbar) {
            uni.hideTabBar()
        }
        const res = uni.getSystemInfoSync()
        const { model, statusBarHeight } = res
        if (
            (model.indexOf("iPhone") > -1 && statusBarHeight > 20) ||
            model.indexOf("iPhone X") > -1 ||
            model.indexOf("iPhone 1") > -1
        ) {
            this.isIphoneX = true
        }
        this.getTabbarHeight()
    },
    methods: {
        getTabbarHeight() {
            return this.tabbarHeight
        },
    },
    watch: {
        value(newVal) {
            this.active = newVal
        },
        active(newVal) {
            this.activeItem = this.tabbarItems.find((item) => item.name === newVal)
            this.$emit("input", newVal)
            this.$emit("change", this.activeItem)
        },
        tabbarItemsLength() {
            this.hasRaisede = !!this.tabbarItems.find((item) => item.raisede)
        },
    },
}
</script>

<style lang="scss" scoped>
@import "./style.scss";
.bg {
    background: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 0;
    box-shadow: 0px -3px 38px 0px rgba(0, 0, 0, 0.1);
}
.lb-tabbar {
    position: relative;
    z-index: 10;
}
.tab-bar-main {
    position: relative;
    z-index: 1;
}
</style>
